<!DOCTYPE html>
<html lang="en" data-bs-theme="auto">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>LoRa iGate & Digi software &minus; Ricardo Guzman CA2RXU</title>
        <link rel="stylesheet" href="/bootstrap.css" />
        <link rel="stylesheet" href="/style.css" />
        <link rel="icon" href="/favicon.png" type="image/x-icon">
    </head>
    <body class="bg-body-tertiary">
        <input type="file" accept="text/json,.json" style="display: none" />
        <form autocomplete="off" action="/configuration.json" method="POST">
            <nav
                class="navbar bg-body-secondary shadow-sm border-bottom sticky-top navbar-expand-lg"
            >
                <div class="container">
                    <a class="navbar-brand" href=""
                        >CA2RXU's LoRa iGate</a
                    >
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarColor01">
                        <ul class="navbar-nav me-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="/">
                                    Configuration
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/update">
                                    Update <small>OTA</small>
                                </a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Backup</a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#" id="backup">Download</a>
                                    <a class="dropdown-item" href="#" id="restore">Restore</a>
                                </div>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Device</a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#" id="reboot">Reboot</a>
                                </div>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="/received-packets">
                                    Received packets
                                </a>
                            </li>
                        </ul>
                        <div class="d-flex">
                            <button class="btn btn-success my-2 my-sm-0" type="submit">Save</button>
                        </div>
                    </div>
                </div>
            </nav>
            
            <div class="container d-none" id="received-packets">
                <div class="row my-5 d-flex align-items-top">
                    <div class="col-12">
                        <h3>Last 10 received packets list</h3>
                        <table class="table mt-4">
                            <thead>
                                <tr>
                                    <th scope="col">Time</th>
                                    <th scope="col">Frame</th>
                                    <th scope="col">RSSI</th>
                                    <th scope="col">SNR</th>
                                </tr>
                            </thead>
                            <tbody>
                                
                            </tbody>
                        </table>
                        <span>List refresh automatically every 15 seconds.</span><br>
                        <small>(Local Time is NTP-Time adjusted with your GMT Offset)</small>
                    </div>
                </div>
                <hr>
            </div>
        
            <div class="container" id="configuration">
                <main>
                    <div class="col-10 my-5 mx-auto">
                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-person-circle"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"
                                        />
                                        <path
                                            fill-rule="evenodd"
                                            d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1"
                                        />
                                    </svg>
                                    Station
                                </h5>
                                <small
                                    >Add your Ham callsign and SSID. 
                                    <br>
                                    <br>
                                    You can leave a comment describing your station. 
                                    <br>
                                    <br>
                                    In the bottom there is a field for personal note that can only be seen in WEB GUI.
                                </small>
                            </div>
                            <div class="col-lg-9 col-sm-12">
                                <div class="row">
                                    <div class="col-12">
                                        <label for="callsign" class="form-label"
                                            >Callsign - SSID</label
                                        >
                                        <input
                                            type="text"
                                            name="callsign"
                                            id="callsign"
                                            class="form-control"
                                            placeholder="N0CALL-10"
                                            required=""
                                            oninput="this.value = this.value.toUpperCase();"
                                        />
                                    </div>
                                    <div class="col-12 mt-3">
                                        <label
                                            for="beacon.comment"
                                            class="form-label"
                                            >Beacon Comment</label
                                        >
                                        <input
                                            type="text"
                                            name="beacon.comment"
                                            id="beacon.comment"
                                            class="form-control"
                                            placeholder="LoRa APRS"
                                            required=""
                                        />
                                    </div>
                                    <div class="col-12 mt-3">
                                        <label
                                            for="beacon.path"
                                            class="form-label"
                                            >Beacon Path</label
                                        >
                                        <input
                                            type="text"
                                            name="beacon.path"
                                            id="beacon.path"
                                            class="form-control"
                                            placeholder="We prefer WIDE1-1"
                                        />
                                    </div>
                                    <div class="col-8 mt-3">
                                        <input
                                            type="hidden"
                                            name="beacon.overlay"
                                            id="beacon.overlay"
                                            class="form-control"
                                            size="1"
                                            required=""
                                        />
                                        <input
                                            type="hidden"
                                            name="beacon.symbol"
                                            id="beacon.symbol"
                                            class="form-control"
                                            size="1"
                                            required=""
                                        />
                                        <label
                                            for="action.symbol"
                                            class="form-label"
                                            >Symbol</label
                                        >
                                        <select
                                            class="form-select form-select"
                                            name="action.symbol"
                                            id="action.symbol"
                                        >
                                            <option value="L#">
                                                Green star with L
                                            </option>
                                            <option value="L_">
                                                Blue circle with L
                                            </option>
                                            <option value="L&">
                                                Black diamond with L
                                            </option>
                                            <option value="La">
                                                Red diamond with L
                                            </option>
                                        </select>
                                    </div>
                                    <div
                                        class="col-4 mt-3"
                                        style="text-align: center"
                                    >
                                        <img
                                            src=""
                                            width="60"
                                            height="60"
                                            class="me-2"
                                        />
                                    </div>
                                    <div class="col-6 mt-3">
                                        <label
                                            for="beacon.latitude"
                                            class="form-label"
                                            >Latitude</label
                                        >
                                        <input
                                            type="text"
                                            name="beacon.latitude"
                                            id="beacon.latitude"
                                            placeholder="-33.440"
                                            class="form-control"
                                        />
                                    </div>
                                    <div class="col-6 mt-3">
                                        <label
                                            for="beacon.longitude"
                                            class="form-label"
                                            >Longitude</label
                                        >
                                        <input
                                            type="text"
                                            name="beacon.longitude"
                                            id="beacon.longitude"
                                            placeholder="-70.613"
                                            class="form-control"
                                        />
                                    </div>
                                    <div class="col-12 mt-3">
                                        <label
                                            for="personalNote"
                                            class="form-label"
                                            >Personal Note</label
                                        >
                                        <input
                                            type="text"
                                            name="personalNote"
                                            id="personalNote"
                                            class="form-control"
                                            placeholder="A Couple of words."
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-router-fill"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M5.525 3.025a3.5 3.5 0 0 1 4.95 0 .5.5 0 1 0 .707-.707 4.5 4.5 0 0 0-6.364 0 .5.5 0 0 0 .707.707"
                                        />
                                        <path
                                            d="M6.94 4.44a1.5 1.5 0 0 1 2.12 0 .5.5 0 0 0 .708-.708 2.5 2.5 0 0 0-3.536 0 .5.5 0 0 0 .707.707Z"
                                        />
                                        <path
                                            d="M2.974 2.342a.5.5 0 1 0-.948.316L3.806 8H1.5A1.5 1.5 0 0 0 0 9.5v2A1.5 1.5 0 0 0 1.5 13H2a.5.5 0 0 0 .5.5h2A.5.5 0 0 0 5 13h6a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5h.5a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 14.5 8h-2.306l1.78-5.342a.5.5 0 1 0-.948-.316L11.14 8H4.86zM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m4.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m1.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m2 0a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0"
                                        />
                                        <path
                                            d="M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"
                                        />
                                    </svg>
                                    WiFi Access
                                </h5>
                                <small
                                    >Add all Wi-Fi Networks intended to be used.</small
                                >
                            </div>
                            <div class="col-lg-9 col-sm-12">
                                <input
                                    type="hidden"
                                    name="wifi.APs"
                                    id="wifi.APs"
                                />

                                <div class="list-networks"></div>

                                <div class="row new">
                                    <div class="d-grid gap-2">
                                        <button
                                            type="button"
                                            class="btn btn-outline-primary"
                                            data-toggle="collapse"
                                            data-target="#add-ap"
                                            aria-expanded="false"
                                            aria-controls="add-ap"
                                        >
                                            Add network
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-database-fill"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M3.904 1.777C4.978 1.289 6.427 1 8 1s3.022.289 4.096.777C13.125 2.245 14 2.993 14 4s-.875 1.755-1.904 2.223C11.022 6.711 9.573 7 8 7s-3.022-.289-4.096-.777C2.875 5.755 2 5.007 2 4s.875-1.755 1.904-2.223"
                                        />
                                        <path
                                            d="M2 6.161V7c0 1.007.875 1.755 1.904 2.223C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777C13.125 8.755 14 8.007 14 7v-.839c-.457.432-1.004.751-1.49.972C11.278 7.693 9.682 8 8 8s-3.278-.307-4.51-.867c-.486-.22-1.033-.54-1.49-.972"
                                        />
                                        <path
                                            d="M2 9.161V10c0 1.007.875 1.755 1.904 2.223C4.978 12.711 6.427 13 8 13s3.022-.289 4.096-.777C13.125 11.755 14 11.007 14 10v-.839c-.457.432-1.004.751-1.49.972-1.232.56-2.828.867-4.51.867s-3.278-.307-4.51-.867c-.486-.22-1.033-.54-1.49-.972"
                                        />
                                        <path
                                            d="M2 12.161V13c0 1.007.875 1.755 1.904 2.223C4.978 15.711 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13v-.839c-.457.432-1.004.751-1.49.972-1.232.56-2.828.867-4.51.867s-3.278-.307-4.51-.867c-.486-.22-1.033-.54-1.49-.972"
                                        />
                                    </svg>
                                    APRS-IS
                                </h5>
                                <small
                                    >Enter you APRS-IS server and
                                    credentials.</small
                                >
                            </div>
                            <div class="col-lg-9 col-sm-12">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="aprs_is.active"
                                                id="aprs_is.active"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="aprs_is.active"
                                                class="form-label"
                                                >Enable APRS-IS
                                                connection</label
                                            >
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="aprs_is.messagesToRF"
                                                id="aprs_is.messagesToRF"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="aprs_is.messagesToRF"
                                                class="form-label"
                                                >Gate APRS-IS Messages to
                                                RF</label
                                            >
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="aprs_is.objectsToRF"
                                                id="aprs_is.objectsToRF"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="aprs_is.objectsToRF"
                                                class="form-label"
                                                >Gate APRS-IS Objects to
                                                RF</label
                                            >
                                        </div>
                                    </div>
                                    <div class="col-8">
                                        <label
                                            for="aprs_is.server"
                                            class="form-label"
                                            >Server</label
                                        >
                                        <input
                                            type="text"
                                            name="aprs_is.server"
                                            id="aprs_is.server"
                                            placeholder="soam.aprs2.net"
                                            class="form-control"
                                        />
                                    </div>
                                    <div class="col-4">
                                        <label
                                            for="aprs_is.port"
                                            class="form-label"
                                            >Port</label
                                        >
                                        <input
                                            type="text"
                                            name="aprs_is.port"
                                            id="aprs_is.port"
                                            placeholder="14580"
                                            class="form-control"
                                        />
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-8">
                                        <label
                                            for="aprs_is.passcode"
                                            class="form-label"
                                            >Passcode</label
                                        >
                                        <input
                                            type="text"
                                            name="aprs_is.passcode"
                                            id="aprs_is.passcode"
                                            class="form-control"
                                        />
                                    </div>
                                    <div class="col-4">
                                        <label
                                            for="aprs_is.filter"
                                            class="form-label"
                                            >Filter</label
                                        >
                                        <input
                                            type="text"
                                            class="form-control"
                                            name="aprs_is.filter"
                                            id="aprs_is.filter"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-broadcast-pin"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707m2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708m5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708m2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM6 8a2 2 0 1 1 2.5 1.937V15.5a.5.5 0 0 1-1 0V9.937A2 2 0 0 1 6 8"
                                        />
                                    </svg>
                                    Beaconing
                                </h5>
                                <small>Set APRS beacon attributes.</small>
                            </div>
                            <div class="col-lg-9 col-sm-12">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="beacon.sendViaAPRSIS"
                                                id="beacon.sendViaAPRSIS"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="beacon.sendViaAPRSIS"
                                                class="form-label"
                                                >Send beacon via APRS-IS
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="beacon.sendViaRF"
                                                id="beacon.sendViaRF"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="beacon.sendViaRF"
                                                class="form-label"
                                                >Send beacon via RF
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-6 d-grid gap-2">
                                        <button class="btn btn-primary" id="send-beacon">Send beacon now</button>
                                    </div>
                                </div>
                                <div class="row mt-4">
                                    <div class="col-12">
                                        <label
                                            for="beacon.interval"
                                            class="form-label"
                                            >Beacon Interval
                                        </label>
                                        <div class="input-group">
                                            <input
                                                type="number"
                                                name="beacon.interval"
                                                id="beacon.interval"
                                                placeholder="15"
                                                class="form-control"
                                                required=""
                                                step="1"
                                                min="15"
                                            />
                                            <span class="input-group-text"
                                                >minutes
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 mt-3">
                                    <div class="form-check form-switch">
                                        <input
                                            type="checkbox"
                                            name="beacon.gpsActive"
                                            id="beacon.gpsActive"
                                            class="form-check-input"
                                        />
                                        <label
                                            for="beacon.gpsActive"
                                            class="form-label"
                                            >Send Real-GPS Beacon <small>(Only for Boards with GPS Modules)</small>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-check form-switch">
                                        <input
                                            type="checkbox"
                                            name="beacon.gpsAmbiguity"
                                            id="beacon.gpsAmbiguity"
                                            class="form-check-input"
                                        />
                                        <label
                                            for="beacon.gpsAmbiguity"
                                            class="form-label"
                                            >Send Real-GPS Beacon with Ambiguity <small>(~ 1 Km of Random Error)</small>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-broadcast-pin"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707m2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708m5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708m2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM6 8a2 2 0 1 1 2.5 1.937V15.5a.5.5 0 0 1-1 0V9.937A2 2 0 0 1 6 8"
                                        />
                                    </svg>
                                    Black List
                                </h5>
                                <small>Add Callsigns with space between them to Blacklist them (* wild card allowed)</small>
                            </div>
                            <div class="col-9 mt-2">
                                <div class="row">
                                    <div class="col-12">
                                        <label
                                            for="blacklist"
                                            class="form-label"
                                            >Blacklist</label
                                        >
                                        <input
                                            type="text"
                                            name="blacklist"
                                            id="blacklist"
                                            class="form-control"
                                            placeholder="Station Callsign"
                                            oninput="this.value = this.value.toUpperCase();"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-broadcast-pin"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707m2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708m5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708m2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM6 8a2 2 0 1 1 2.5 1.937V15.5a.5.5 0 0 1-1 0V9.937A2 2 0 0 1 6 8"
                                        />
                                    </svg>
                                    Digipeating
                                </h5>
                                <small>Define the Digipeater mode</small>
                            </div>
                            <div class="col-9 mt-2">
                                <div class="row">
                                    <div class="col-12">
                                        <label
                                            for="digi.mode"
                                            class="form-label"
                                            >Repeater Mode</label
                                        >
                                        <select
                                            class="form-select form-select"
                                            name="digi.mode"
                                            id="digi.mode"
                                        >
                                            <option value="0">
                                                OFF
                                            </option>
                                            <option value="2">
                                                WIDE1 (fill-in) Digi
                                            </option>
                                            <option value="3">
                                                WIDE2 (+WIDE1) Digi
                                            </option>
                                        </select>
                                    </div>
                                    <div class="col-12 mt-3">
                                        <label
                                            for="digi.ecoMode"
                                            class="form-label"
                                            >Eco Mode
                                            <small
                                                >(Requires Digipeating enabled and APRS-IS connection disabled).</small
                                            ></label
                                        >
                                        <select
                                            class="form-select form-select"
                                            name="digi.ecoMode"
                                            id="digi.ecoMode"
                                        >
                                            <option value="0">
                                                OFF (Normal Mode - WiFiAP enabled)
                                            </option>
                                            <option value="1">
                                                Ultra Eco Mode (Sleep till Packet Rx (WiFiAP/WebUI & Display disabled))
                                            </option>
                                            <option value="2">
                                                OFF (Normal Mode - WiFiAP disabled)
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-broadcast"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707m2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708m5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708m2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0"
                                        />
                                    </svg>
                                    LoRa
                                </h5>
                                <small
                                    >Config LoRa APRS Xmitting settings.</small
                                >
                            </div>
                            <div class="col-lg-9 col-sm-12">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="lora.txActive"
                                                id="lora.txActive"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="lora.txActive"
                                                class="form-label"
                                                >Enable LoRa TX</label
                                            >
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="lora.rxActive"
                                                id="lora.rxActive"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="lora.rxActive"
                                                class="form-label"
                                                >Enable LoRa RX</label
                                            >
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label
                                            for="lora.txFreq"
                                            class="form-label"
                                            >Tx Frequency
                                        </label>
                                        <div class="input-group">
                                            <input
                                                type="text"
                                                name="lora.txFreq"
                                                id="lora.txFreq"
                                                placeholder="433775000"
                                                class="form-control"
                                                required=""
                                            />
                                            <input
                                                type="hidden"
                                                name="lora.iGateFreq"
                                                id="lora.iGateFreq"
                                                placeholder="433775000"
                                                class="form-control"
                                                required=""
                                            />
                                            <span class="input-group-text">
                                                Hz
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label
                                            for="lora.rxFreq"
                                            class="form-label">
                                            Rx Frequency
                                        </label>
                                        <div class="input-group">
                                            <input
                                                type="text"
                                                name="lora.rxFreq"
                                                id="lora.rxFreq"
                                                placeholder="433775000"
                                                class="form-control"
                                            />
                                            <span class="input-group-text"
                                                >Hz
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-4">
                                    <div class="col-12 mb-4">
                                        <label
                                            for="action.speed"
                                            class="form-label"
                                            >Predefined speeds
                                        </label>
                                        <select
                                            class="form-select form-select"
                                            name="action.speed"
                                            id="action.speed"
                                        >
                                            <option value="300">
                                                BW 125khz CR 4:5 SF 12 (Slow
                                                Standard, 300bps)
                                            </option>
                                            <option value="244">
                                                BW 125khz CR 4:6 SF 12 (244bps)
                                            </option>
                                            <option value="209">
                                                BW 125khz CR 4:7 SF 12 (209bps)
                                            </option>
                                            <option value="183">
                                                BW 125khz CR 4:8 SF 12 (183bps)
                                            </option>
                                            <option value="610">
                                                BW 125khz CR 4:8 SF 10 (610bps)
                                            </option>
                                            <option value="1200">
                                                BW 125khz CR 4:7 SF 9 (Fast
                                                Standard, 1200bps)
                                            </option>
                                            <option value="">
                                                User defined
                                            </option>
                                        </select>
                                    </div>
                                    <div class="col-5">
                                        <label
                                            for="lora.signalBandwidth"
                                            class="form-label"
                                            >Bandwidth
                                        </label>
                                        <div class="input-group">
                                            <select
                                                class="form-select form-select"
                                                name="lora.signalBandwidth"
                                                id="lora.signalBandwidth"
                                                required=""
                                            >
                                                <option value="125000" selected>
                                                    125 kHz
                                                </option>
                                                <option value="250000">
                                                    250 kHz
                                                </option>
                                                <option value="500000">
                                                    500 kHz
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-7">
                                        <label
                                            for="lora.spreadingFactor"
                                            class="form-label"
                                            >Spreading Factor
                                        </label>
                                        <select
                                            class="form-select form-select"
                                            name="lora.spreadingFactor"
                                            id="lora.spreadingFactor"
                                            required=""
                                        >
                                            <option value="7">
                                                SF7 - Lowest battery usage
                                            </option>
                                            <option value="8">SF8</option>
                                            <option value="9">SF9</option>
                                            <option value="10">SF10</option>
                                            <option value="11">SF11</option>
                                            <option value="12" selected>
                                                SF12 - Highest sensitivity
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-6">
                                        <label
                                            for="lora.codingRate4"
                                            class="form-label">
                                            Coding Rate
                                        </label>
                                        <select
                                            class="form-select form-select"
                                            name="lora.codingRate4"
                                            id="lora.codingRate4"
                                            required=""
                                        >
                                            <option value="5">5</option>
                                            <option value="6">6</option>
                                            <option value="7">7</option>
                                            <option value="8">8</option>
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label
                                            for="lora.power"
                                            class="form-label">
                                            Power
                                        </label>
                                        <div class="input-group">
                                            <input
                                                type="number"
                                                name="lora.power"
                                                id="lora.power"
                                                placeholder="20"
                                                min="0"
                                                max="20"
                                                step="1"
                                                class="form-control"
                                                required=""
                                            />
                                            <span class="input-group-text"
                                                >dBm</span
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-tv-fill"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M2.5 13.5A.5.5 0 0 1 3 13h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5M2 2h12s2 0 2 2v6s0 2-2 2H2s-2 0-2-2V4s0-2 2-2"
                                        />
                                    </svg>
                                    Display
                                </h5>
                                <small>OLED screen configuration.</small>
                            </div>
                            <div class="col-lg-9 col-sm-12">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="display.alwaysOn"
                                                id="display.alwaysOn"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="display.alwaysOn"
                                                class="form-label"
                                                >Always On</label
                                            >
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div
                                            class="form-check form-switch mt-1"
                                        >
                                            <input
                                                type="checkbox"
                                                name="display.turn180"
                                                id="display.turn180"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="display.turn180"
                                                class="form-label"
                                                >Turn 180º</label
                                            >
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-6">
                                        <label
                                            for="display.timeout"
                                            class="form-label"
                                            >Display Timeout</label
                                        >
                                        <div class="input-group">
                                            <input
                                                type="text"
                                                name="display.timeout"
                                                id="display.timeout"
                                                value="4"
                                                class="form-control"
                                            />
                                            <span class="input-group-text"
                                                >seconds</span
                                            >
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label
                                            for="other.rememberStationTime"
                                            class="form-label"
                                            >Remember Station Time</label
                                        >
                                        <div class="input-group">
                                            <input
                                                type="number"
                                                name="other.rememberStationTime"
                                                id="other.rememberStationTime"
                                                placeholder="30"
                                                class="form-control"
                                                required=""
                                                step="1"
                                                min="1"
                                            />
                                            <span class="input-group-text"
                                                >minutes</span
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-heart-pulse-fill"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M1.475 9C2.702 10.84 4.779 12.871 8 15c3.221-2.129 5.298-4.16 6.525-6H12a.5.5 0 0 1-.464-.314l-1.457-3.642-1.598 5.593a.5.5 0 0 1-.945.049L5.889 6.568l-1.473 2.21A.5.5 0 0 1 4 9z"
                                        />
                                        <path
                                            d="M.88 8C-2.427 1.68 4.41-2 7.823 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C11.59-2 18.426 1.68 15.12 8h-2.783l-1.874-4.686a.5.5 0 0 0-.945.049L7.921 8.956 6.464 5.314a.5.5 0 0 0-.88-.091L3.732 8z"
                                        />
                                    </svg>
                                    Battery
                                </h5>
                                <small>
                                    Battery Monitor & Health
                                    <br>
                                    <br>
                                    Max Voltage on input pin is 3.3V.
                                    <br>
                                    <br>
                                    Calculate voltage divider accordingly.
                                </small>
                            </div>
                            <div class="col-9 mt-2">
                                <div class="row mt-2">
                                    <div class="col-6">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="battery.sendInternalVoltage"
                                                id="battery.sendInternalVoltage"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="battery.sendInternalVoltage"
                                                class="form-label"
                                                >Send Internal Voltage</label
                                            >
                                        </div>
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="battery.sendVoltageAsTelemetry"
                                                id="battery.sendVoltageAsTelemetry"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="battery.sendVoltageAsTelemetry"
                                                class="form-label"
                                                style="font-style: italic;"
                                                >(Send Voltage As Telemetry)</label   
                                            >
                                        </div>
                                        <div class="form-check form-switch mt-3">
                                            <input
                                                type="checkbox"
                                                name="battery.monitorInternalVoltage"
                                                id="battery.monitorInternalVoltage"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="battery.monitorInternalVoltage"
                                                class="form-label"
                                                >Monitor Internal Voltage Health</label
                                            >
                                        </div>
                                        <div class="col">
                                            <label for="battery.internalSleepVoltage" class="form-label"
                                                >Internal Sleep Voltage</label
                                            >
                                            <div class="input-group">
                                                <input
                                                    type="number"
                                                    name="battery.internalSleepVoltage"
                                                    id="battery.internalSleepVoltage"
                                                    placeholder="3.0"
                                                    class="form-control"
                                                    step="0.1"
                                                    min="2.9"
                                                    max="3.7"
                                                />
                                                <span class="input-group-text"
                                                    >volts</span
                                                >
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="battery.sendExternalVoltage"
                                                id="battery.sendExternalVoltage"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="battery.sendExternalVoltage"
                                                class="form-label"
                                                >Send External Voltage</label
                                            >
                                        </div>
                                        <div class="form-check form-switch mt-5">
                                            <input
                                                type="checkbox"
                                                name="battery.monitorExternalVoltage"
                                                id="battery.monitorExternalVoltage"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="battery.monitorExternalVoltage"
                                                class="form-label"
                                                >Monitor External Voltage Health</label
                                            >
                                        </div>
                                        <div class="col">
                                            <label for="battery.externalSleepVoltage" class="form-label"
                                                >External Sleep Voltage</label
                                            >
                                            <div class="input-group">
                                                <input
                                                    type="number"
                                                    name="battery.externalSleepVoltage"
                                                    id="battery.externalSleepVoltage"
                                                    placeholder="3.0"
                                                    class="form-control"
                                                    step="0.1"
                                                    min="3.0"
                                                    max="24.0"
                                                />
                                                <span class="input-group-text"
                                                    >volts</span
                                                >
                                            </div>
                                        </div>
                                        <div class="form-floating col-7 mt-3">
                                            <input
                                                type="text"
                                                name="battery.externalVoltagePin"
                                                id="battery.externalVoltagePin"
                                                value="34"
                                                class="form-control"
                                            />
                                            <label
                                                for="battery.externalVoltagePin"
                                                class="form-label"
                                                >External Voltage Pin</label
                                            >
                                        </div>
                                        <div class="col">
                                            <label for="battery.voltageDividerR1" class="form-label">External Voltage divider R1</label>
                                            <div class="input-group">
                                                <input 
                                                    type="number"
                                                    name="battery.voltageDividerR1"
                                                    id="battery.voltageDividerR1"
                                                    placeholder="100.0"
                                                    class="form-control"
                                                    step="0.1"
                                                    min="1"
                                                    max="1000"
                                                />
                                                <span class="input-group-text">kOhm</span>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <label for="battery.voltageDividerR2" class="form-label">External Voltage divider R2</label>
                                            <div class="input-group">
                                                <input
                                                    type="number"
                                                    name="battery.voltageDividerR2"
                                                    id="battery.voltageDividerR2"
                                                    placeholder="27.0"
                                                    class="form-control"
                                                    step="0.1"
                                                    min="1"
                                                    max="1000"
                                                />
                                                <span class="input-group-text">kOhm</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-broadcast-pin"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707m2.122 2.122a4 4 0 0 0 0 5.656.5.5 0 1 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 0 1 .708.708m5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708m2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM6 8a2 2 0 1 1 2.5 1.937V15.5a.5.5 0 0 1-1 0V9.937A2 2 0 0 1 6 8"
                                        />
                                    </svg>
                                    WX Telemetry
                                </h5>
                                <small>Define Wx telemetry</small>
                            </div>
                            <div class="col-9 mt-2">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="wxsensor.active"
                                                id="wxsensor.active"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="wxsensor.active"
                                                class="form-label"
                                                >Activate Wx Telemetry
                                                <small
                                                    >(Requires a BME/BMP280, BME680 or Si7021 sensor).</small
                                                ></label
                                            >
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-6">
                                        <label for="wxsensor.heightCorrection" class="form-label"
                                            >Height Correction (Above Sea-Level)</label
                                        >
                                        <div class="input-group">
                                            <input
                                                type="number"
                                                name="wxsensor.heightCorrection"
                                                id="wxsensor.heightCorrection"
                                                placeholder="0"
                                                class="form-control"
                                                step="1"
                                                min="0"
                                            />
                                            <span class="input-group-text"
                                                >meters</span
                                            >
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <label for="wxsensor.temperatureCorrection" class="form-label"
                                            >Temperature Correction</label
                                        >
                                        <div class="input-group">
                                            <input
                                                type="number"
                                                name="wxsensor.temperatureCorrection"
                                                id="wxsensor.temperatureCorrection"
                                                placeholder="0.0"
                                                class="form-control"
                                                step="0.1"
                                                min="-5"
                                                max="5"
                                            />
                                            <span class="input-group-text"
                                                >C°</span
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-file-earmark-text-fill"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M4.5 9a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m.5 2.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1z"
                                        />
                                    </svg>
                                    Syslog
                                </h5>
                                <small
                                    >Broadcast the system log over the
                                    network.</small
                                >
                            </div>
                            <div class="col-lg-9 col-sm-12">
                                <div class="form-check form-switch">
                                    <input
                                        type="checkbox"
                                        name="syslog.active"
                                        id="syslog.active"
                                        class="form-check-input"
                                    />
                                    <label
                                        for="syslog.active"
                                        class="form-label"
                                        >Enable syslog</label
                                    >
                                </div>
                                <div class="row mt-3">
                                    <div class="col-6">
                                        <label
                                            for="syslog.server"
                                            class="form-label"
                                            >Server</label
                                        >
                                        <input
                                            type="text"
                                            name="syslog.server"
                                            id="syslog.server"
                                            placeholder="lora.link9.net"
                                            class="form-control"
                                            disabled
                                        />
                                    </div>
                                    <div class="col-6">
                                        <label
                                            for="syslog.port"
                                            class="form-label"
                                            >Port</label
                                        >
                                        <input
                                            type="text"
                                            name="syslog.port"
                                            id="syslog.port"
                                            placeholder="1514"
                                            class="form-control"
                                            disabled
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-database-fill"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M3.904 1.777C4.978 1.289 6.427 1 8 1s3.022.289 4.096.777C13.125 2.245 14 2.993 14 4s-.875 1.755-1.904 2.223C11.022 6.711 9.573 7 8 7s-3.022-.289-4.096-.777C2.875 5.755 2 5.007 2 4s.875-1.755 1.904-2.223"
                                        />
                                        <path
                                            d="M2 6.161V7c0 1.007.875 1.755 1.904 2.223C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777C13.125 8.755 14 8.007 14 7v-.839c-.457.432-1.004.751-1.49.972C11.278 7.693 9.682 8 8 8s-3.278-.307-4.51-.867c-.486-.22-1.033-.54-1.49-.972"
                                        />
                                        <path
                                            d="M2 9.161V10c0 1.007.875 1.755 1.904 2.223C4.978 12.711 6.427 13 8 13s3.022-.289 4.096-.777C13.125 11.755 14 11.007 14 10v-.839c-.457.432-1.004.751-1.49.972-1.232.56-2.828.867-4.51.867s-3.278-.307-4.51-.867c-.486-.22-1.033-.54-1.49-.972"
                                        />
                                        <path
                                            d="M2 12.161V13c0 1.007.875 1.755 1.904 2.223C4.978 15.711 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13v-.839c-.457.432-1.004.751-1.49.972-1.232.56-2.828.867-4.51.867s-3.278-.307-4.51-.867c-.486-.22-1.033-.54-1.49-.972"
                                        />
                                    </svg>
                                    TNC
                                </h5>
                                <small
                                    >TNC and KISS configuration</small
                                >
                            </div>
                            <div class="col-lg-9 col-sm-12">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <div class="form-text">
                                                Server will be available at port <strong>8001</strong>
                                            </div>
                                            <input
                                                type="checkbox"
                                                name="tnc.enableServer"
                                                id="tnc.enableServer"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="tnc.enableServer"
                                                class="form-label"
                                                >Enable TNC server</label
                                            >
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="tnc.enableSerial"
                                                id="tnc.enableSerial"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="tnc.enableSerial"
                                                class="form-label"
                                                >Enable Serial KISS</label
                                            >
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="tnc.acceptOwn"
                                                id="tnc.acceptOwn"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="tnc.acceptOwn"
                                                class="form-label"
                                                >Accept own frames via KISS</label
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-heart-pulse-fill"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M1.475 9C2.702 10.84 4.779 12.871 8 15c3.221-2.129 5.298-4.16 6.525-6H12a.5.5 0 0 1-.464-.314l-1.457-3.642-1.598 5.593a.5.5 0 0 1-.945.049L5.889 6.568l-1.473 2.21A.5.5 0 0 1 4 9z"
                                        />
                                        <path
                                            d="M.88 8C-2.427 1.68 4.41-2 7.823 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C11.59-2 18.426 1.68 15.12 8h-2.783l-1.874-4.686a.5.5 0 0 0-.945.049L7.921 8.956 6.464 5.314a.5.5 0 0 0-.88-.091L3.732 8z"
                                        />
                                    </svg>
                                    Reboot Time
                                </h5>
                            </div>
                            <div class="col-9 mt-2">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="other.rebootMode"
                                                id="other.rebootMode"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="other.rebootMode"
                                                class="form-label"
                                                >Reboot Mode Active</label
                                            >
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-6">
                                        <label
                                            for="other.rebootModeTime"
                                            class="form-label"
                                            >Time before forced Reboot</label
                                        >                                    
                                        <div class="input-group">
                                            <input
                                                type="number"
                                                name="other.rebootModeTime"
                                                id="other.rebootModeTime"
                                                placeholder="6"
                                                class="form-control"
                                                step="6"
                                                min="6"
                                                max="168"
                                            />
                                            <span class="input-group-text"
                                                >hours</span
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-router-fill"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M5.525 3.025a3.5 3.5 0 0 1 4.95 0 .5.5 0 1 0 .707-.707 4.5 4.5 0 0 0-6.364 0 .5.5 0 0 0 .707.707"
                                        />
                                        <path
                                            d="M6.94 4.44a1.5 1.5 0 0 1 2.12 0 .5.5 0 0 0 .708-.708 2.5 2.5 0 0 0-3.536 0 .5.5 0 0 0 .707.707Z"
                                        />
                                        <path
                                            d="M2.974 2.342a.5.5 0 1 0-.948.316L3.806 8H1.5A1.5 1.5 0 0 0 0 9.5v2A1.5 1.5 0 0 0 1.5 13H2a.5.5 0 0 0 .5.5h2A.5.5 0 0 0 5 13h6a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5h.5a1.5 1.5 0 0 0 1.5-1.5v-2A1.5 1.5 0 0 0 14.5 8h-2.306l1.78-5.342a.5.5 0 1 0-.948-.316L11.14 8H4.86zM2.5 11a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m4.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m2.5.5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m1.5-.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m2 0a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0"
                                        />
                                        <path
                                            d="M8.5 5.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"
                                        />
                                    </svg>
                                    WiFi Auto AP
                                </h5>
                                <small
                                    >Add your password and WiFi AP timeout to
                                    auto access point. Auto AP will start if
                                    there is no WiFi connection. Timeout will
                                    count from startup or last client
                                    disconnected.</small
                                >
                            </div>
                            <div class="col-lg-9 col-sm-12">
                                <div class="col-12">
                                    <label
                                        for="wifi.autoAP.password"
                                        class="form-label"
                                        >Password</label
                                    >
                                    <input
                                        type="password"
                                        name="wifi.autoAP.password"
                                        id="wifi.autoAP.password"
                                        class="form-control"
                                        placeholder="1234567890"
                                        required=""
                                    />
                                </div>
                                <div class="col-12 mt-3">
                                    <label
                                        for="wifi.autoAP.timeout"
                                        class="form-label"
                                        >WiFi AP timeout to search again for available WiFi's
                                        <small>(in minutes)</small></label
                                    >
                                    <input
                                        type="number"
                                        name="wifi.autoAP.timeout"
                                        id="wifi.autoAP.timeout"
                                        class="form-control"
                                        placeholder="10"
                                        required=""
                                        step="1"
                                        min="0"
                                    />
                                    <div class="form-text">
                                        Set to <strong>0</strong> if you don't
                                        want WiFi AP to stop.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-cloud-upload-fill"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            fill-rule="evenodd"
                                            d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0m-.5 14.5V11h1v3.5a.5.5 0 0 1-1 0"
                                        />
                                    </svg>
                                    OTA
                                </h5>
                                <small
                                    >Set your username and password to allow
                                    firmware updating over-the-air.</small
                                >
                            </div>
                            <div class="col-lg-9 col-sm-12">
                                <div class="col-12">
                                    <label for="ota.username" class="form-label"
                                        >Username</label
                                    >
                                    <input
                                        type="text"
                                        name="ota.username"
                                        id="ota.username"
                                        class="form-control"
                                    />
                                </div>
                                <div class="col-12 mt-3">
                                    <label for="ota.password" class="form-label"
                                        >Password</label
                                    >
                                    <input
                                        type="password"
                                        name="ota.password"
                                        id="ota.password"
                                        class="form-control"
                                    />
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-cloud-upload-fill"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            fill-rule="evenodd"
                                            d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0m-.5 14.5V11h1v3.5a.5.5 0 0 1-1 0"
                                        />
                                    </svg>
                                    Admin
                                </h5>
                                <small
                                    >Set your username and password to allow
                                    access to the web interface.</small
                                >
                            </div>
                            <div class="col-lg-9 col-sm-12">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="webadmin.active"
                                                id="webadmin.active"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="webadmin.active"
                                                class="form-label"
                                                >Web interface authentication</label
                                            >
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <label for="webadmin.username" class="form-label"
                                        >Username</label
                                    >
                                    <input
                                        type="text"
                                        name="webadmin.username"
                                        id="webadmin.username"
                                        class="form-control"
                                        value="admin"
                                        required=""
                                    />
                                </div>
                                <div class="col-12 mt-3">
                                    <label for="webadmin.password" class="form-label"
                                        >Password</label
                                    >
                                    <input
                                        type="password"
                                        name="webadmin.password"
                                        id="webadmin.password"
                                        class="form-control"
                                    />
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-cloud-upload-fill"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            fill-rule="evenodd"
                                            d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0m-.5 14.5V11h1v3.5a.5.5 0 0 1-1 0"
                                        />
                                    </svg>
                                    Remote Management
                                </h5>
                                <small
                                    >Manage Station via APRS Messages. Leave empty to disable!
                                </small>
                            </div>
                            <div class="col-lg-9 col-sm-12">
                                <div class="col-12">
                                    <label
                                        for="remoteManagement.managers"
                                        class="form-label"
                                        >Callsign-SSID of Managers, space separated, trailing * wildcard allowed (ex: AB1CDE-9, AB1CDE*)</label
                                    >
                                    <div class="input-group">
                                        <input
                                            type="text"
                                            name="remoteManagement.managers"
                                            id="remoteManagement.managers"
                                            class="form-control"
                                        />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <input
                                                type="checkbox"
                                                name="remoteManagement.rfOnly"
                                                id="remoteManagement.rfOnly"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="remoteManagement.rfOnly"
                                                class="form-label"
                                                >Managers commands only via RF (not APRS-IS)</label
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-cloud-upload-fill"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            fill-rule="evenodd"
                                            d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0m-.5 14.5V11h1v3.5a.5.5 0 0 1-1 0"
                                        />
                                    </svg>
                                    NTP
                                </h5>
                                <small
                                    >Set your GMT Time Zone.
                                </small>
                            </div>
                            <div class="col-lg-9 col-sm-12">
                                <div class="col-12">
                                    <label
                                        for="ntp.gmtCorrection"
                                        class="form-label"
                                        >GMT Time Correction for accurate Local Time</label
                                    >
                                    <div class="input-group">
                                        <input
                                            type="number"
                                            name="ntp.gmtCorrection"
                                            id="ntp.gmtCorrection"
                                            placeholder="0"
                                            class="form-control"
                                            step="0.25"
                                            min="-23.75"
                                            max="23.75"
                                        />
                                        <span class="input-group-text"
                                            >hours</span
                                        >
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>

                        <div class="row my-5 d-flex align-items-top">
                            <div class="col-lg-3 col-sm-12">
                                <h5>
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        width="20"
                                        height="20"
                                        fill="currentColor"
                                        class="bi bi-heart-pulse-fill"
                                        viewBox="0 0 16 16"
                                    >
                                        <path
                                            d="M1.475 9C2.702 10.84 4.779 12.871 8 15c3.221-2.129 5.298-4.16 6.525-6H12a.5.5 0 0 1-.464-.314l-1.457-3.642-1.598 5.593a.5.5 0 0 1-.945.049L5.889 6.568l-1.473 2.21A.5.5 0 0 1 4 9z"
                                        />
                                        <path
                                            d="M.88 8C-2.427 1.68 4.41-2 7.823 1.143q.09.083.176.171a3 3 0 0 1 .176-.17C11.59-2 18.426 1.68 15.12 8h-2.783l-1.874-4.686a.5.5 0 0 0-.945.049L7.921 8.956 6.464 5.314a.5.5 0 0 0-.88-.091L3.732 8z"
                                        />
                                    </svg>
                                    Experimental
                                </h5>
                                <small>You can test new features. <u>Use at your own risk!</u></small>
                            </div>
                            <div class="col-lg-9 col-sm-12">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-check form-switch">
                                            <div class="form-text">
                                                When "only" iGate Mode loses WiFi, it will change into a Digipeater Mode and after 15 min check if WiFi available and return to "only" iGate Mode.
                                            </div>
                                            <input
                                                type="checkbox"
                                                name="other.backupDigiMode"
                                                id="other.backupDigiMode"
                                                class="form-check-input"
                                            />
                                            <label
                                                for="other.backupDigiMode"
                                                class="form-label"
                                                >Backup Digipeater Mode</label
                                            >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
                <footer
                    class="my-5 py-5 text-body-secondary text-center text-small"
                >
                    <p class="mb-4 small">%BUILD_INFO%</p>
                    <p class="mb-1 small">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            fill="currentColor"
                            class="bi bi-cc-circle-fill"
                            viewBox="0 0 16 16"
                        >
                            <path
                                d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.408 5.89c.681 0 1.138.47 1.187 1.107h1.147v-.11c-.053-1.187-1.024-2-2.343-2-1.604 0-2.518 1.05-2.518 2.751v.747c0 1.7.906 2.73 2.518 2.73 1.314 0 2.285-.792 2.343-1.939v-.114H6.595c-.049.615-.497 1.05-1.187 1.05-.84 0-1.318-.62-1.318-1.727v-.742c0-1.112.488-1.754 1.318-1.754Zm5.404 0c.68 0 1.138.47 1.186 1.107h1.147v-.11c-.053-1.187-1.024-2-2.342-2-1.604 0-2.518 1.05-2.518 2.751v.747c0 1.7.905 2.73 2.518 2.73 1.314 0 2.285-.792 2.342-1.939v-.114h-1.147c-.048.615-.496 1.05-1.186 1.05-.84 0-1.319-.62-1.319-1.727v-.742c0-1.112.488-1.754 1.319-1.754Z"
                            />
                        </svg>
                        2023-25
                        <b
                            ><a href="https://github.com/richonguzman"
                                >CA2RXU</a
                            ></b
                        >:
                        <a
                            href="https://github.com/richonguzman/LoRa_APRS_iGate"
                            >LoRa APRS iGate Firmware</a
                        >.
                    </p>
                    <p class="mb-1 small">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="16"
                            height="16"
                            fill="currentColor"
                            class="bi bi-cc-circle-fill"
                            viewBox="0 0 16 16"
                        >
                            <path
                                d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.408 5.89c.681 0 1.138.47 1.187 1.107h1.147v-.11c-.053-1.187-1.024-2-2.343-2-1.604 0-2.518 1.05-2.518 2.751v.747c0 1.7.906 2.73 2.518 2.73 1.314 0 2.285-.792 2.343-1.939v-.114H6.595c-.049.615-.497 1.05-1.187 1.05-.84 0-1.318-.62-1.318-1.727v-.742c0-1.112.488-1.754 1.318-1.754Zm5.404 0c.68 0 1.138.47 1.186 1.107h1.147v-.11c-.053-1.187-1.024-2-2.342-2-1.604 0-2.518 1.05-2.518 2.751v.747c0 1.7.905 2.73 2.518 2.73 1.314 0 2.285-.792 2.342-1.939v-.114h-1.147c-.048.615-.496 1.05-1.186 1.05-.84 0-1.319-.62-1.319-1.727v-.742c0-1.112.488-1.754 1.319-1.754Z"
                            />
                        </svg>
                        2024
                        <b
                            ><a
                                href="https://sq2cpa.pl/r/lora-footer"
                                target="_blank"
                                >SQ2CPA</a
                            >
                            &
                            <a
                                href="https://cd3eap.aguayoki.cl/"
                                target="_blank"
                                >CD3EAP</a
                            ></b
                        >: Settings Page.
                    </p>
                    <p class="mt-4 small">
                        Support this project<br />
                        <a
                            href="https://github.com/sponsors/richonguzman"
                            target="_blank"
                            ><img
                                src="" /></a
                        ><a href="http://paypal.me/richonguzman" target="_blank"
                            ><img
                                src=""
                        /></a>
                    </p>
                </footer>
            </div>
        </form>
        <div
            class="modal fade"
            id="saveModal"
            tabindex="-1"
            aria-labelledby="saveModal"
            aria-hidden="true"
        >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Saving settings</h5>
                    </div>
                    <div class="modal-body">
                        Please wait... Settings will be saved and LoRa will
                        reboot
                    </div>
                    <div class="modal-footer">Waiting for connection...</div>
                </div>
            </div>
        </div>
        <div
            class="modal fade"
            id="savedModal"
            tabindex="-1"
            aria-labelledby="saveModal"
            aria-hidden="true"
        >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Settings</h5>
                        <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                        ></button>
                    </div>
                    <div class="modal-body">Settings saved!</div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal"
                        >
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
            <div id="toast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <strong class="me-auto">System Message</strong>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body text-center"></div>
            </div>
        </div>
    </body>
    <script src="/bootstrap.js"></script>
    <script src="/script.js"></script>
</html>